<template>
  <div class="app">
    <van-nav-bar
      title="影院"
      left-arrow
      fixed
      placeholder
      z-index="999"
      @click-left="$router.back()"
    />

    <div class="additem" @click="$router.push('/cinema')">
      <ul class="one-item">
        <svg class="xl-icon location" aria-hidden="true">
          <use xlink:href="#icon-dingwei"></use>
        </svg>
        <li>地图</li>
      </ul>
      <ul class="two-item">
        <li>{{shopInfo.name}}</li>
        <li class="add">
          地址：{{shopInfo.address}}
        </li>
        <li class="add">影城电话：{{shopInfo.tel}}</li>
      </ul>
      <div class="arrow">
        <van-icon size="30" name="arrow" />
      </div>
    </div>

    <!--  轮播 -->
    <div class="films-banner"> 
<!-- 105 75 -->  
  <div class="films-banner-bg">
  <img :src="activeSwiperItem.img" alt="">
  </div>
  <!-- 组件上加了ref  
  this.$refs.xxx  拿到这个组件的实例 
  拿到实例后 组件里的数据随便拿  方法随便用
  他不是响应式的 -->
    <swiper ref="mySwiper" :options="swiperOptions" @slideChange="swiperChange">
      <swiper-slide v-for="item in filmsList" :key="item._id">
         <div class="films-banner-imgwrap">
             <img class="films-banner-img" :src="item.img" alt="">
         </div>
      </swiper-slide>

      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>
    <div class="triangle"></div>
  </div>
    <!--  轮播end/ -->
    <div class="name">
      <span>{{activeSwiperItem.name}}</span>
      <span class="time">{{activeSwiperItem.duration}}|{{activeSwiperItem.type}}</span>
    </div>
    <div class="time-list">
      <ul>
    

      </ul>
    </div>

    <div class="time">
      <!-- 天数 -->
      <div class="time-day">
        <ul>
       <li v-for="(item,index) in bookList"
        :class="{'active':index==bookDayActive}"
       :key="item._id" @click="changeBookDayActive(index)">
          <p>{{item.dayName}}</p>
          <p>{{item.day}}</p>
        </li>
 
        </ul>
      </div>
      <!-- 小时 -->
      <div class="time-day-hour" v-if="bookList[bookDayActive]">
        <!-- 14  -->



          <div class="hour-box"  @click="$router.push({
            name:'chooseSeat',
            query:{
              filmsList:JSON.stringify(bookList[bookDayActive].list),
              index
            }
          })" v-for="(item,index) in bookList[bookDayActive].list" :key="item._id">
          <!--  -->
          <div class="hour-min">
            <h2>{{item.time1}}</h2>
            <p>{{item.time2}}散场</p>
          </div>
          <!--  -->
          <div class="hour-text">
            <p>{{item.format}}</p>
            <p>{{item.roomName}}</p>
          </div>
          <!--  -->
          <div class="hour-price">
            <span class="price-one">￥{{item.oldPrice}}</span>
            <span>￥{{item.price}}</span>
            <p><span>朋友卡</span><span>￥{{item.cardPrice}}起</span></p>
          </div>
          <van-button type="danger">购票</van-button>
        </div>
  
      </div>
    </div>



  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  data() {
    return {
      swiperOptions:  {
        slidesPerView: 4, //显示几个
        spaceBetween: 0,
        centeredSlides: true,
        activeIndex:0
      },
      filmsList:[],//  banner
      shopInfo:{},
      bookList:[],//  场次信息
      bookDayActive:0
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper; //  这句话是获取组件的实例  
    },
    //  当前高亮 (变大) 选中的那个swiper
    activeSwiperItem(){
        let index = this.swiperOptions.activeIndex
       return this.filmsList[index]||{}
    },
    filmsId(){
        return this.$route.query.filmsId
    }
  },
  watch:{
     'activeSwiperItem._id':{
         handler(filmsId,o){
            console.log(filmsId)
            // n  就是电影id
            if(filmsId){
              this.getBookList(filmsId)
            }
         }

     }
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  mounted() {
    console.log("Current Swiper instance object", this.swiper);
    this.getFilmsList();
    let {shopInfo} = localStorage
    this.shopInfo = shopInfo?JSON.parse(shopInfo):{}

  },
  methods: {
     
     //  获取电影列表
    getFilmsList() {
      let { shopId } = localStorage;
     
      this.$http
        .post("/apis/films/pub/getList", {
          shopId,
          status:1
        })
        .then((res) => {
          if(res.code==0){
            this.filmsList = res.rows;
             let {filmsId} = this
            let index = this.filmsList.findIndex(v=>v._id==filmsId)

            this.swiper.slideTo(index, 1000, false);
            this.swiperOptions.activeIndex = index; //  


          }
        });
    },
   //   根据shopId 和电影Id获取到排班信息
     getBookList(filmsId){
         let { shopId } = localStorage;
         let today_time  =  new Date(new Date().toLocaleDateString()).getTime();
         //  这个接口损耗大  

              this.$toast.loading({
                message: '加载中...',
                duration: 0,
                loadingType: 'spinner',
                overlay:true
              });

        this.$http.get('/apis/book/pub/getList',{
             params:{
               filmsId,
               shopId,
               today_time
             }
        })
        .then(res=>{
           console.log(res)
           this.$toast.clear();//   清除loading
           if(res.code===0){
                this.bookList = res.rows;
           }
        })   


     },
     //  切换场次日期
     changeBookDayActive(index){
          this.bookDayActive = index
     },

    //  轮播图的切换事件
    swiperChange(){

        //  拿到按当前索引
        console.log(this.swiper.activeIndex)
     this.swiperOptions.activeIndex = this.swiper.activeIndex
    }



  },
};
</script>

<style scoped lang="less">
.app {
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .additem {
    width: 100%;
    // height: 110px;
    display: flex;
    flex-direction: row;
    padding: 20px 0;
    .one-item {
      width: 20%;
      height: 110px;
      border-right: 1px solid gray;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #aaa;
      .location {
        font-size: 28px;
        margin-bottom: 5px;
        color: #aaa;
      }
    }
    .two-item {
      flex: 1;
      height: 110px;
      margin-left: 15px;
      li {
        margin: 10px;
      }
      .add {
        font-size: 13px;
        color: grey;
      }
    }
    .arrow {
      display: flex;
      width: 50px;
      justify-items: center;
      align-items: center;
    }
    .iconfont {
      font-size: 30px;
    }
  }
  .name {
    margin: 5px;
    text-align: center;
    span {
      display: block;
    }
    .time {
      color: grey;
    }
  }
  .time-list {
    width: 100%;
    height: 50px;
    li {
      float: left;
      margin-left: 25px;
      span {
        display: block;
        color: grey;
      }
      .rider {
        width: 20px;
        background: red;
        border-radius: 50%;
        color: #fff !important;
      }
      .today {
        color: red;
      }
    }
  }
  .timebiao {
    ul {
      width: 100%;
      height: 50px;
    }
    li {
      float: left;
      span {
        display: block;
      }
      .btntime {
        background: red;
        border-radius: 8px;
        border: none;
        color: #fff;
      }
    }
  }
}

///   swiper
.films-banner{
    position: relative;
    width: 100%;
    height: 180px;
    background: #ccc;
    display: flex;
    align-items: center;
    overflow: hidden;
    .swiper-slide-active{
        transform: scale(1.3);
        transition: transform 0.3s;
    }
    &-bg{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top:0;
 
      filter: blur(30px);
    
      img{
          width: 100%;
          height: 100%;
  object-fit: cover;
      }
   
    }
   &-imgwrap{
       padding: 20px;
       transform: translateX(-10%);
   }
    &-img{
        width: 75px;
        height: 105px;
         display: block;
        object-fit: cover;
    }
    // 三角
  .triangle{
       position: absolute;
       bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    //   border 三个边框透明 
     border-width: 10px;
     border-style: solid;
     border-top-color: transparent;
     border-left-color: transparent;
     border-right-color: transparent;
     border-bottom-color: #fff;

  }

}

.time {
  margin-top: 30px;
  .time-day {
    margin-top: 20px;
    width: 240px;
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: row;
      li {
        text-align: center;
        p:nth-child(2) {
          margin-top: 5px;
          text-align: center;
          line-height: 30px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          color: rgb(0, 0, 0);
          // background-color: red;
        }
      }
      li.active {
        color: red;
        p:nth-child(2) {
          background-color: red;
        }
      }
    }
  }
  .time-day-hour {
    margin-top: 20px;
    .hour-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: row;
      border-top: 1px solid #ccc;
      padding: 15px 0;
      .hour-min {
        p {
          color: #ccc;
          font-size: 14px;
        }
      }
      .hour-text {
        color: #000;
        p:nth-child(2) {
          color: #ccc;
          font-size: 12px;
        }
      }
      .hour-price {
        .price-one {
          text-decoration: line-through;
        }
        span:nth-child(2) {
          color: red;
          font-size: 24px;
        }
        p {
          text-align: center;
          font-size: 12px;
          background-color: #ffffff;
          // padding: 3px;
          border: 1px solid #f1a23d;
          border-radius: 5px;
          color: #fff;
          span:nth-child(1) {
            background-color: #f1a23d;
            padding: 2px;
            border-radius: 5px 0 0 5px;
          }
          span:nth-child(2) {
            display: inline-block;
            background-color: #fff;
            color: #f1a23d;
            font-size: 12px;
            padding: 0 2px;
          }
        }
      }
    }
  }
  .van-button--normal {
    border-radius: 20px 20px;
  }
}
</style>
